<template>
  <section class="db">
    <template v-if="!$route.meta.hidden">
        <!-- header start  -->
        <header class="db-header">
          <router-link class="logo" :to="{path: '/list/filters'}">西湖礼物后台管理系统</router-link>
          <div class="user-info" v-if="user.id">
            <span v-text="user.nicky"></span>
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                <img :src="user.avatar">
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>个人信息</el-dropdown-item>
                <el-dropdown-item>设置</el-dropdown-item>
                <el-dropdown-item @click.native="logout">注销</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
        </header>
        <!-- header end  -->
  
        <!-- body start  -->
        <div class="db-body">
  
          <!-- menu start -->
          <aside class="db-menu-wrapper">
            <el-menu :default-active="activeMenu" class="db-menu-bar" router>
              <template v-for="(route, index) in $router.options.routes[$router.options.routes.length - 2].children">
                <template v-if="route.children && route.name">
                  <el-submenu :index="route.name">
                    <template slot="title"><i :class="route.iconClass"></i>{{route.name}}
</template>
                  <el-menu-item :index="cRoute.name" v-for="(cRoute, cIndex) in route.children" :route="cRoute">{{cRoute.name}}</el-menu-item>
                </el-submenu>
              </template>

<template v-if="!route.children && route.name">
  <el-menu-item :index="route.name" :route="route">
    <i :class="route.iconClass"></i>{{route.name}}</el-menu-item>
</template>
            </template>
            <el-menu-item @click="shwoDialogQrcode" index="qrcode" :route="{path: '/'}">
              <i class="el-icon-menu"></i>下载二维码
            </el-menu-item>
          </el-menu>
        </aside>
        <!-- menu end -->

        <!-- content start -->
        <div class="db-content-wrapper">
          <section class="db-content">
            <router-view></router-view>
          </section>
        </div>
        <!-- content end -->
      </div>
      <!-- body end  -->
    </template>

<template v-else>
  <router-view>
  </router-view>
</template>
    <el-dialog title="下载二维码" v-model="qrcodeDialogVisible" size="small" @close="resetQrcodeDialog">
        <el-row style="margin-bottom: 20px;">
            <el-col :span="3">
                <div style="line-height: 36px; text-align: right;">页面：</div>
            </el-col>
            <el-col :span="20" :offset="1">
                <el-select clearable v-model="selectedPath" placeholder="请选择（必填）">
                    <el-option
                        v-for="item in pagesInQrcodeDialog"
                        :label="item.label"
                        :value="item.path">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row style="margin-bottom: 20px;">
            <el-col :span="3">
                <div style="line-height: 36px; text-align: right;">渠道类型：</div>
            </el-col>
            <el-col :span="20" :offset="1">
                <el-select 
                  clearable 
                  v-model="channelType" 
                  placeholder="请选择渠道类型（可选）" 
                  @change="handleChannelTypeChange">
                    <el-option
                        v-for="item in channelTypes"
                        :label="item.name"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row v-show="channelType">
            <el-col :span="3">
                <div style="line-height: 36px; text-align: right;">渠道值：</div>
            </el-col>
            <el-col :span="20" :offset="1">
                <el-input 
                  v-if="channelType !== '50948b19-67b8-42ff-b857-dbd35295b89s' 
                  && channelType !== '50948b19-67b8-42ff-b857-dbd35295b80s'" 
                  v-model="channelName" 
                  placeholder="请输入渠道值">
                </el-input>
                <el-select v-else clearable v-model="channelName" placeholder="请选择（可选）">
                    <el-option
                        v-for="item in channelNames"
                        :label="item.shopName"
                        :value="item.id">
                    </el-option>
                </el-select>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="20" :offset="4">
                <p style="color: #888; font-size: 12px; line-height: 36px;">* 产品详情页二维码请在产品管理中获取</p>
            </el-col>
        </el-row>
        <span slot="footer" class="dialog-footer">
            <el-button @click="resetQrcodeDialog">重置</el-button>
            <el-button type="primary" @click="downloadQrcode('qr')">下载二维码</el-button>
            <el-button type="primary" @click="downloadQrcode('wx')">下载小程序码</el-button>
        </span>
        <a href="" download="" v-show="false" ref="download"></a>
    </el-dialog>
  </section>
</template>

<script>
  import {
    downloadQrcode,
    getDict,
    getShopList
  } from './api/api';
  
  export default {
    data() {
      return {
        user: {
          id: '',
          username: '',
          avatar: ''
        },
        activeMenu: '',
        
  
        qrcodeDialogVisible: false,
        channelTypes: [],
        channelNames: [],
        pagesInQrcodeDialog: [
          {
            label: '首页',
            path: 'home'
          },
          {
            label: '礼物说',
            path: 'scenic'
          }
        ],
        channelType: null,
        channelName: null,
        selectedPath: null
      };
    },
    created() {
      this.activeMenu = this.$route.name;
      this.user = JSON.parse(localStorage.getItem('user'));

      getDict({
        type: 'channelType'
      }).then(res => {
        if (res.sysCode === 1) {
          this.channelTypes = res.data
        }
      })
    },
    watch: {
      '$route' (to, from) {
        this.activeMenu = this.$route.name;
        this.user = JSON.parse(localStorage.getItem('user'));
      }
    },
    methods: {
      /**
       * 下载二维码时，选择渠道类型的句柄
       */
      handleChannelTypeChange (channelType) {
        this.channelNames = [];
        this.channelName = null;
        switch (channelType) {
          case '50948b19-67b8-42ff-b857-dbd35295b89s':
            getShopList({
              shopName: '',
              shopAddress: '',
              shopPhone: '',
              page:0,
            }).then(res => {
              if (res.sysCode === 1) {
                this.channelNames = res.data.content
              }
            })
            break;
          case '50948b19-67b8-42ff-b857-dbd35295b80s':
            break;
          default:
            break;
        }
      },
      /**
       * 下载二维码
       */
      downloadQrcode(type) {
        if (!this.selectedPath) {
          this.$message.error('请至少选择一个页面')
          return false
        }
  
        const channelType = this.channelType ?
          `key=${this.channelType}` : ''
        const channelName = channelType ? 
          (this.channelName ? `&value=${this.channelName}` : '')
          : ''

        if (channelType && !channelName) {
          this.$message.error('请输入渠道类型相对应的值')
          return false
        }
  
        let params = {path: `pages/${this.selectedPath}/${this.selectedPath}?${channelType}${channelName}`}
        type && (params.type = type)

        downloadQrcode(params).then(res => {
            if (res.sysCode === 1) {
              this.$refs.download.href = `https://xhlw.neocross.cn/web/${res.data}`
              this.$refs.download.download = ''
              this.$refs.download.click()
            } else {
              this.$message.error(res.errorMsg);
            }
          })
      },
      /**
       * 重置二维码对话框数据
       */
      resetQrcodeDialog() {
        this.selectedPath = null
        this.channelType = null
        this.channelName = null
      },
      /**
       * 打开获取二维码对话框
       */
      shwoDialogQrcode() {
        this.qrcodeDialogVisible = true
      },
      logout() {
        this.$confirm('确定要注销吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'info'
        }).then(() => {
          localStorage.removeItem('user');
          this.$router.push({
            path: '/login'
          });
        }).catch(() => {});
      }
    }
  };
</script>

<style lang="scss">
  @import './styles/_variables.scss';
  .db {
    .el-dropdown-menu {
      margin-top: 20px;
    }
    // header
    .db-header {
      width: 100%;
      height: 60px;
      background: #20A0FF;
      padding: 13px 20px;
      box-sizing: border-box;
      color: #ffffff;
      z-index: 99;
      position: fixed;
      left: 0;
      top: 0;
      .logo {
        font-size: 2.4rem;
      }
      .user-info {
        float: right;
        img {
          width: 25px;
          height: 25px;
          vertical-align: -7px;
          margin: 0 0 0 10px;
          cursor: pointer;
        }
      }
    }
    // body
    .db-body {
      // menu
      .db-menu-wrapper {
        position: fixed;
        left: 0;
        top: 60px;
        background: red;
        height: 100%;
        overflow: auto;
        z-index: 98;
        .db-menu-bar {
          height: 100%;
          flex-grow: 0;
          width: 200px;
        }
      }
      // content
      .db-content-wrapper {
        width: 100%;
        z-index: 97;
        box-sizing: border-box;
        padding: 60px 0px 0px 200px;
        .db-content {
          padding: 25px;
          .db-content-inner {
            padding: 30px 0px;
          }
        }
      }
    }
  }
</style>
